<template>
  <div class="search">
    <div class="search-input">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
    </div>
    <el-button type="success" icon="el-icon-search" @click="onClickSearch">搜索</el-button>
    <el-button type="primary" :loading="false" @click="onClickRefresh">刷新页面</el-button>
    <slot></slot>
    <el-popconfirm confirmButtonText='确定' cancelButtonText='取消' icon="el-icon-info" iconColor="red" title="确定删除全部内容吗？" @confirm='onConfirm' v-if="!nodelete">
      <template #reference>
        <el-button type="danger">全部删除</el-button>
      </template>
    </el-popconfirm>
    <slot name="footer"></slot>
  </div>
</template>

<script lang='ts'>
import { reactive, SetupContext, toRefs } from "vue";
export default {
  name: " ",
  emits: ["refresh", "search", "deleteAll"],
  props: {
    nodelete: {
      default: false,
      type: Boolean,
    },
  },
  setup(props: {}, ctx: SetupContext) {
    const data = reactive({
      input: "",
      visible: true,
    });

    /* 刷新当前页面 */
    const onClickRefresh = () => {
      ctx.emit("refresh");
    };

    /* 搜索页面 */
    const onClickSearch = () => {
      if (!data.input) return;
      ctx.emit("search", data.input);
      data.input = "";
    };

    /* 删除全部 */
    const onConfirm = () => {
      ctx.emit("deleteAll");
    };
    return {
      ...toRefs(data),
      onClickRefresh,
      onClickSearch,
      onConfirm,
    };
  },
};
</script>
<style lang="less" scoped>
.search {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .search-input {
    margin-right: 10px;
  }
}
</style>